<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动案例-百度高管</title>
	<style type="text/css">
		/*代码初始化*/
		*{
			margin:0px;
			padding: 0px;
		}
		li{
			list-style: none;
		}
		/*代码主体*/
		.box{
			width: 550px;
			height: 280px;
			border:1px solid;
			margin: 0 auto;
		}
		.top{
			height: 50px;
			width: 100%;
		}
		.top h1{
			font-size: 20px;
			float: left;
		}
		.zhankai{
			float: right;
		}
		.bottom{
			height: 230px;
			width: 100%;
		}
		.bottom ul{
			width: 100%;
			height: 100%;
		}
		.bottom ul li{
			width: 20%;
			float: left;
			margin-right: 27px;
			margin: 0 1%;
			background-color: red;
		}
		.bottom ul li a{
			width: 110px;
			display: block;
		}
		.bottom ul li a img{
			display: block;
		}
	</style>
</head>
<body>
	<!-- 容器 -->
	<div class="box">
		<!-- 上布局 -->
		<div class="top">
			<h1>百度高管</h1>
			<div class="zhankai">
				<a href="">展开</a>
				<img src="http://graph.baidu.com/resource/12292c5c14f4a0e3eca9001594277715.jpg">
			</div>
		</div>
		<!-- 下布局 -->
		<div class="bottom">
			<ul>
				<li>
					<a href="">
						<img src="http://graph.baidu.com/resource/126180e0897018449c27b01594223775.jpg">
						李彦宏
					</a>
					<p>
						百度创始人董事长兼CEO
					</p>
				</li>
				<li>
					<a href="">
						<img src="http://graph.baidu.com/resource/126180e0897018449c27b01594223775.jpg">
						李彦宏
					</a>
					<p>
						百度创始人董事长兼CEO
					</p>
				</li>
				<li>
					<a href="">
						<img src="http://graph.baidu.com/resource/126180e0897018449c27b01594223775.jpg">
						李彦宏
					</a>
					<p>
						百度创始人董事长兼CEO
					</p>
				</li>
				<li>
					<a href="">
						<img src="http://graph.baidu.com/resource/126180e0897018449c27b01594223775.jpg">
						李彦宏
					</a>
					<p>
						百度创始人董事长兼CEO
					</p>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>